import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_demo2/tab_bar1.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  List<Map> titles = [
    {
      'icon': const Icon(Icons.home),
      'title': '首页',
      'inactiveColor': Colors.grey,
      'activeColor': const Color(0xffF4D144),
    },
    {
      'icon': const Icon(Icons.search),
      'title': '搜索',
      'inactiveColor': Colors.grey,
      'activeColor': const Color(0x69F0AEFF),
    },
    {
      'icon': const Icon(Icons.apps),
      'title': '排名',
      'inactiveColor': Colors.grey,
      'activeColor': Colors.pink,
    },
    {
      'icon': const Icon(Icons.video_camera_front),
      'title': '直播',
      'inactiveColor': Colors.grey,
      'activeColor': Colors.blueAccent,
    },
  ];

  List<String> bodyImages = [
    'assets/images/splash_one.png',
    'assets/images/home_page.png',
    'assets/images/money_requests.png',
    'assets/images/search_recipient.png',
  ];

  void _incrementCounter() {
    setState(() {});
  }

  Color backgroundColor = const Color(0xff050B18);

  List<Widget>? _pages;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      appBar: AppBar(
        backgroundColor: backgroundColor,
        centerTitle: true,
        automaticallyImplyLeading: false,
        title: Text(titles[_currentIndex]['title']),
        systemOverlayStyle: SystemUiOverlayStyle.light,
      ),
      body: getBody(context),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: TabBar1(
        selectedIndex: _currentIndex,
        backgroundColor: backgroundColor,
        containerHeight: 56,
        items: titles.map((item) {
          var index = titles.indexOf(item);
          return TabBar1Item(
            icon: titles[index]['icon']!,
            title: Text(titles[index]['title']!),
            activeColor: titles[index]['activeColor']!,
            inactiveColor: titles[index]['inactiveColor']!,
            textAlign: TextAlign.center,
          );
        }).toList(),
        onItemSelected: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }

  Widget getBody(BuildContext context) {
    // double width = MediaQuery.of(context).size.width;
    // double height = MediaQuery.of(context).size.width * (812 / 375);

    _pages ??= List.generate(bodyImages.length, (index) {
      return SingleChildScrollView(
        child: Column(
          children: [
            index == 0
                ? TextButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text(
                      'back',
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  )
                : SizedBox(),
            Container(
              color: backgroundColor,
              alignment: Alignment.center,
              child: Image(
                image: AssetImage(bodyImages[index]),
                fit: BoxFit.fill,
              ),
            ),
          ],
        ),
      );
    });

    return IndexedStack(
      index: _currentIndex,
      children: _pages!,
    );

    //   Center(
    //   child: Column(
    //     mainAxisAlignment: MainAxisAlignment.center,
    //     children: <Widget>[
    //       Text(
    //         titles[_currentIndex],
    //         style: const TextStyle(
    //           fontSize: 24,
    //           fontWeight: FontWeight.bold,
    //           color: Color(0xFFFFFFFF),
    //         ),
    //       ),
    //       Text(
    //         '$_counter',
    //         style: Theme.of(context).textTheme.headline4,
    //       ),
    //     ],
    //   ),
    // );
  }
}
